<template>
  <view>
    <view class="u-p-24">
      <view class="filters">
        <view class="filter on">所有订单</view>
        <view class="filter">即将到帐</view>
        <view class="filter">已到账</view>
      </view>

      <view class="total">
        <div class="item">
          <div class="num">20</div>
          <div class="gray">订单数</div>
        </div>
        <div class="item">
          <div class="num">¥765.43</div>
          <div class="gray">付款金额</div>
        </div>
        <div class="item">
          <div class="num yellow">¥123.8</div>
          <div class="gray">预收入</div>
        </div>
      </view>

      <view class="list">
        <view class="ysr" v-for="i in 3" :key="i">
          <view class="flex-row align-center">
            <u-avatar src="https://picsum.photos/id/646/200/200" size="70"></u-avatar>
            <view class="text-cut u-font-24 u-p-16">昵称</view>
          </view>

          <view class="u-m-t-24 flex-row justify-between">
            <u-avatar src="https://picsum.photos/id/648/200/200" size="170" mode="square"></u-avatar>
            <view class="info">
              <view class="flex-row justify-between align-baseline">
                <view class="tag">已到账</view>
                <view>
                  <text style="color: #333" class="u-font-26 u-m-r-16">付款金额</text>
                  <text style="color: #000" class="u-font-32">¥48.02</text>
                </view>
              </view>
              <view class="text-cut u-font-26">百草味-零食大礼包 休闲食品...</view>
              <view class="u-font-26" style="color: #999999;">订单编号:123564679613134</view>
            </view>
          </view>
          
          <view class="u-font-24 flex-col justify-center" style="height: 100rpx;">
            <view style="color: #999;">2019-11-11  11:11:11 创建</view>
            <view class="flex-row justify-end align-baseline">
              <text style="margin-right: auto;color: #999;">2019-11-11  11:11:11 到账</text>
              <text class="u-m-r-16">返佣收入</text>
              <text style="color: #F6AD3C;">¥7.64</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .filters {
    display: flex;
    align-items: center;
    padding-bottom: 16rpx;

    .filter {
      background: #fff;
      color: #000;
      padding: 8rpx 24rpx;
      border-radius: 40rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
    }

    .filter.on {
      color: #f7b959;
    }
  }

  .total {
    width: 702rpx;
    height: 120rpx;
    border-radius: 15rpx;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      width: 33.33%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .gray {
      font-size: 24rpx;
      color: #C3C3C3;
      margin-top: 8rpx;
    }

    .num {
      font-size: 30rpx;
      color: #000;
    }

    .yellow {
      color: #F6AD3C;
    }
  }

  .ysr {
    width: 702rpx;
    height: 400rpx;
    background: #fff;
    border-radius: 20rpx;
    margin: 24rpx 0;
    padding: 20rpx;

    .info {
      width: 470rpx;
      height: 170rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 16rpx;
    }

    .tag {
      height: 38rpx;
      border-radius: 19rpx;
      background: #F6AD3C;
      color: #fff;
      font-size: 24rpx;
      line-height: 38rpx;
      padding: 0 16rpx;
    }
  }
</style>
